<!DOCTYPE html>
<html>
<head>
    <title>Test Base64 Image</title>
</head>
<body>
    <h1>Base64 Image Test</h1>
    <p>Loading image from generate.json...</p>
    <img id="generated-image" style="max-width: 100%; height: auto;" />

    <script>
        fetch('generate.json')
            .then(response => response.json())
            .then(data => {
                const base64 = data.data.images[0].base64;
                const imgElement = document.getElementById('generated-image');
                imgElement.src = 'data:image/png;base64,' + base64;
                console.log('Base64 length:', base64.length);
                console.log('First 100 chars:', base64.substring(0, 100));
            })
            .catch(error => {
                console.error('Error loading image:', error);
                document.body.innerHTML += '<p style="color: red;">Error: ' + error + '</p>';
            });
    </script>
</body>
</html>